import React,{useEffect,useState} from 'react';
import {Form, Input, Select, DatePicker, Button, Space, InputNumber} from "antd";
import './index.less'
import {connect} from "react-redux";
import dayjs from "dayjs";
import {editFormDataType,expireType} from './data'
const {RangePicker} = DatePicker
const { Option } = Select;
function SearchForm(props) {
    let dateFormat = 'YYYY-MM-DD'
    let {userOptions,subList} = props
    const [searchForm] = Form.useForm<editFormDataType>(props.row);
    const [startDate, setStartDate] = useState(dayjs().startOf('day'));
    const [endDate, setEndDate] = useState(dayjs().endOf('day'));

    let expireData:expireType[] = [
        {
            type:'day',
            data:0,
            value:"0day",
            label:'今天'
        },
        {
            type:'day',
            data:1,
            value:"1day",
            label:'明天'
        },
        {
            type:'day',
            data:3,
            value:"3day",
            label:'3天'
        },
        {
            type:'day',
            data:5,
            value:"5day",
            label:'5天'
        },
        {
            type:'week',
            data:1,
            value:"1week",
            label:'一周'
        },
        {
            type:'month',
            data:1,
            value:"1month",
            label:'一月'
        },
        {
            type:'quarter',
            data:1,
            value:"1quarter",
            label:'一季'
        },
        {
            type:'quarter',
            data:3,
            value:"3quarter",
            label:'三季'
        },
        {
            type:'year',
            data:1,
            value:"1year",
            label:'一年'
        },
        {
            type:'year',
            data:2,
            value:"2year",
            label:'两年'
        },
    ]


    const expireChange = (val) => {
        let curExpire = expireData.filter(item=>item.value == val)
        if(curExpire.length>0){
            let curtype = curExpire[0].type
            let curdate = Number(curExpire[0].data)
            let startDate = dayjs().startOf('day')
            let endDate = dayjs().add(curdate,curtype).endOf('day')
            setStartDate(startDate)
            setEndDate(endDate)
            searchForm.setFieldsValue({'endDate':endDate,'startDate':startDate})
        }
    }
    const toAdd = () => {
        props.add()
    }
    const toQuery = () => {
      let searchData = searchForm.getFieldsValue()
      props.toQuery(searchData)
    }
    const reStore = () => {
        searchForm.resetFields()
    }
    const onChangeStartDate = (val) => {
        let startDate = dayjs(val).format(dateFormat)
        if(searchForm.getFieldValue('endDate')){
            let endDate = dayjs(searchForm.getFieldValue('endDate')).format(dateFormat)
            if(dayjs(startDate).isAfter(dayjs(endDate))){
                searchForm.setFieldsValue({endDate:null})
            }
        }
    }
    const onChangeEndDate = (val) => {
        let endDate = dayjs(val).format(dateFormat)
        if(searchForm.getFieldValue('startDate')){
            let startDate = dayjs(searchForm.getFieldValue('startDate')).format(dateFormat)
            if(dayjs(startDate).isAfter(dayjs(endDate))){
                searchForm.setFieldsValue({startDate:null})
            }
        }
    }
    return (
        <Form
            form={searchForm}
            labelCol={{span: 6, offset: 0}}
            wrapperCol={{ flex: 4 }}
            layout="inline"
        >
            <Form.Item label="用户名:" name="uid">
                <Select
                    style={{width:'190px',textAlign:'left'}}
                    options={userOptions}
                    allowClear
                />
            </Form.Item>
            <Form.Item label="邮 箱:" name="email" >
                <Input allowClear/>
            </Form.Item>
            <Form.Item label="订阅类型:" name="subType">
                <Select
                    style={{width:'190px',textAlign:'left'}}
                    options={subList}
                    allowClear
                />
            </Form.Item>
            {/*<Form.Item label="到期类型:" name="expireType">*/}
            {/*    <Select*/}
            {/*        style={{width:'190px',textAlign:'left'}}*/}
            {/*        options={expireData}*/}
            {/*        onChange={expireChange}*/}
            {/*    />*/}
            {/*</Form.Item>*/}
            <Form.Item label="开始时间:" name="startDate">
                <DatePicker style={{width:'190px'}}
                            allowClear
                            onChange={onChangeStartDate}
                            format={dateFormat}
                            defaultPickerValue={dayjs(startDate)}
                />
            </Form.Item>
            <Form.Item label="到期时间:" name="endDate">
                <DatePicker style={{width:'190px'}}
                            allowClear
                            onChange={onChangeEndDate}
                            format={dateFormat}
                            defaultPickerValue={dayjs(endDate)}
                />
            </Form.Item>
            <Form.Item wrapperCol={{flex: 4}}>
                <Space>
                    <Button onClick={reStore}>
                        重置
                    </Button>
                    <Button className="successBtn" onClick={toAdd}>
                       新增
                    </Button>
                    <Button type="primary" onClick={toQuery}>
                        查询
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    );
}


const mapStateToProps = (state:any)=> {
    return{
        subAllOptions:state.subData.subAllOptions,
        subOptions:state.subData.subOptions,
        userOptions:state.subData.userOptions,
    }
}
export default connect(mapStateToProps)(SearchForm);
